<template>
    <transition appear name="custom-classes-transition"
        enter-active-class="animate__animated animate__faster  animate__backInUp "
        leave-active-class="animate__animated animate__faster animate__backInUp ">
        <div class="bbtn fs12" :style="Cstyle">
            {{ props.title }}
        </div>
    </transition>
</template>

<script setup lang="ts">
import { computed } from 'vue'
const Cstyle = computed(() => {
    return 'width:' + 124 * innerWidth / 1920 + 'px;' + 'height:' + 40 * innerHeight / 1080 + 'px;'
})
const props = defineProps({
    title: {
        type: String,
        default: () => ''
    }
})
</script>

<style scoped lang="scss">
.bbtn {

    color: #FFFFFF;
    cursor: pointer;
    margin-right: 10px;
    width: 110px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url('../../assets/image/按钮_长.png') center no-repeat;
    background-size: 100% 100%;
}
</style>